@charset "utf-8";

/* CSS Document */

.m-menubtn{position: fixed;z-index: 102;top:0;right: 0;width:60px;height:60px;cursor: pointer; background:#093580;-webkit-transition:.5s;transition:.5s; display:none}
.m-menubtn.anim{opacity:1; filter:alpha(opacity=100); -webkit-transform: translate(0,0); transform: translate(0,0);}
.m-menubtn span{position: absolute;top:-10px;bottom: 0;left: 0; right: 0; width:20px;height:2px; background: #fff; margin: auto;}
.m-menubtn span:before, .m-menubtn span:after {content: "";width: 100%;height: 100%;position: absolute;bottom: 0;left: 0;right: 0;margin: auto; background-color: #fff;}
.m-menubtn span:before {bottom: 5px;}
.m-menubtn span:after {bottom: -5px; left: 50%;width: 50%;}
.m-menubtn.active span:before{-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg);-o-transform: rotate(-90deg);-ms-transform: rotate(-90deg);transform: rotate(-90deg); background:#fff}
.m-menubtn.active span:after {-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg);-o-transform: rotate(-90deg);-ms-transform: rotate(-90deg);transform: rotate(-90deg);opacity: 0;}
.m-menubtn.active span {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg); background:#fff}
.m-menubtn.active span, .m-menubtn.active span:before, .m-menubtn.active span:after {right: 0;bottom: 0;}
.m-menubtn span, .m-menubtn span:before, .m-menubtn span:after{-webkit-transition: all 0.5s cubic-bezier(0.5, 0, 0, 1);-moz-transition: all 0.5s cubic-bezier(0.5, 0, 0, 1);-o-transition: all 0.5s cubic-bezier(0.5, 0, 0, 1);transition: all 0.5s cubic-bezier(0.5, 0, 0, 1);}
.m-menubtn:before {content: "Menu";font-size: 12px;position: absolute;bottom: 10px; left: 0; right: 0; margin: auto;text-align: center; color:#fff}

.m-menu{position:fixed; right:0;top:0; width:50%; height:100%;overflow-y:auto; overflow-x:hidden;-webkit-transition:.4s;-moz-transition:.4s;transition:.4s;visibility: hidden;opacity: 0;z-index:101;}
.m-menu ul{ width:100%;padding-top:80px; padding-bottom:30px; padding-left:5%; padding-right:5%;overflow-y:auto;overflow-x:hidden;}
.m-menu li{ position: relative; text-align:center;bottom: -20px;opacity: 0;-webkit-transition:0.6s cubic-bezier(0.5, 0, 0, 1);-moz-transition: 0.6s cubic-bezier(0.5, 0, 0, 1);-o-transition: 0.6s cubic-bezier(0.5, 0, 0, 1);transition: 0.6s cubic-bezier(0.5, 0, 0, 1);}
.m-menu li>a{ font-size:20px;line-height:50px}
.m-menu a{ display:block; color:#fff;}
.m-menu .sub a{color:rgba(255,255,255,.5); line-height:35px;font-size:18px; padding-left:20px; position:relative}
.m-menu .sub a:before{content: "";position: absolute;bottom: 15px; left: 0; width: 10px; height: 1px; background: rgba(255,255,255,.5);}
.m-menu.active{visibility: visible; opacity:1;}
.m-menu.active li{bottom: 0;opacity: 1;}
.m-menu.active li:nth-child(1){transition-delay:.3s;}
.m-menu.active li:nth-child(2){transition-delay:.35s;}
.m-menu.active li:nth-child(3){transition-delay:.4s;}
.m-menu.active li:nth-child(4){transition-delay:.45s;}
.m-menu.active li:nth-child(5){transition-delay:.5s;}
.m-menu.active li:nth-child(6){transition-delay:.55s;}
.m-menu.active li:nth-child(7){transition-delay:.6s;}
.m-menu.active li:nth-child(8){transition-delay:.65s;}

.m-menu .last{ margin-top:30px; padding-top:30px; border-top:1px solid rgba(255,255,255,.1);font-weight:bold; font-size:20px;}
.m-menu .last:before{ content:""; width:35px; height:35px; background:url(../images/icon01w.png) no-repeat center; border:1px solid rgba(255,255,255,.3); display:block; margin:0 auto}
.m-menu .last a{ line-height:30px;}
.m-menu .last .mtel{ margin-top:15px}
.m-menubg{display: block;width:50%;height:0;z-index:100;position: fixed;bottom: 0;right:0;-webkit-transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); -moz-transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);-o-transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); background:#151515}
.m-menubg.active{ height:100%}


.m-footer{background:#093580;color:#fff; position:fixed; width:100%; left:0;bottom:0; display:none; z-index:99}
.m-footer li{ float:left; width:33.33%; text-align:center}
.m-footer a{ display:block; line-height:20px;color:#fff;}
.m-footer li i{ display:block;background:url(../images/tel01.png) no-repeat center;height:25px;}
.m-footer .li2 i{ display:block;background:url(../images/tel02.png) no-repeat center;height:25px;}
.m-footer .li3 i{ display:block;background:url(../images/right_pic3_h.png) no-repeat center;height:25px; background-size:auto 20px}
.m-footer span{ display:block; font-size:12px}
.inner-nav-m{ display:none; position:absolute;right:0;top:0;width:100%;z-index:9}
.inner-nav-m .tit{font-size:16px; line-height:40px; height:45px; white-space:nowrap; text-overflow:ellipsis; padding-right:20px; color:#333; float:right;position:relative;}
.inner-nav-m .tit:after{ content:""; width:6px; height:6px; border-top:1px solid #333; border-right:1px solid #333; -moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg); display:block; position:absolute;right:5px;top:16px}
.inner-nav-m .sub{position:absolute;top:45px; width:100%;left:0; background:#093580; display:none; }
.inner-nav-m .sub a{ display:block; border-bottom:1px solid rgba(255,255,255,.2); background:#093580; line-height:20px;color:#fff; padding:8px 10px}
.inner-nav-m .sub a:hover{ background:#f4ce1a;}

@media screen and (max-width:1920px){
.banner .txt h3{ font-size:65px}
.banner .txt h4{ font-size:22px}
}
@media screen and (max-width:1680px){
.culture .pic{ height:450px;}
.culture .pic img{ height:100% !important; object-fit:cover;}
.culture .txt>*{ font-size:14px;}
.culture .txt .icon img{ height:55px}
}
@media screen and (max-width:1440px){
.wrap{ width:100%; padding:0 5%}
.space{ padding:60px 0}
.banner .swiper-pagination{bottom: 30px;}
.banner .txt h3{ font-size:60px}
.f-nav{ margin-left:120px; width:calc(100% - 420px)}
.i-about .more{ margin-top:25px;}
.i-about .numbox{ margin-top:40px;}
.caselist .bot .more{ margin-top:20px}
}
@media screen and (max-width:1366px){
.menu li{ margin:0 15px}
.f-nav{margin-left: 100px;}
}
@media screen and (max-width:1200px){
.menu, .header .tel{ display:none}
.wrap{ padding:0 3%}
.header, .logo, .n-headertop{ height:60px;}
.header, .logo, .header.header-scroll, .header-scroll .logo, .n-headertop{ height:60px;}
.logo img{ height:45px}
.m-menubtn{ display:block}
.banner .txt{ width:94%; left:3%; -moz-transform: translateX(0);-webkit-transform: translateX(0);transform: translateX(0);}
.i-product .view .txt{ width:40%}
}
@media screen and (max-width:1024px){
.banner .txt h3{ font-size:50px;}
.banner .txt .more{ font-size:14px;}
.nbanner{ height:300px}
.space, .i-product .view .swiper-slide{ padding:30px 0}
.title, .ntitle{ margin-bottom:20px; font-size:30px;}
.i-product .view h2{ font-size:30px;}
.i-product .preview h3{ font-size:14px;}
.i-product .preview .line{ margin-top:20px;}
.i-about .intro, .main .content{ font-size:14px; line-height:26px;}
.i-about .more{ margin-top:20px; line-height:35px;font-size: 12px;padding-left: 10px;background: #093580 url(../images/arrow.png) no-repeat right 10px center;width: 92px;}
.i-about .numbox{ margin-top:20px;}
.i-about .numbox .num span{font-size: 35px;}
.i-about .numbox li{ font-size:12px;}
.i-product .view .more{ margin-top:20px; line-height:33px;font-size: 12px;padding-left: 10px;background: url(../images/arrow2.png) no-repeat right 10px center;width: 92px;}
.i-news .tapnav a{width:92px;line-height:33px; font-size:12px}

.inner-nav{ margin-bottom:20px; height:auto;}
.inner-nav .ntitle{ font-size:26px; padding-bottom:10px}
.inner-nav li{ margin-left:20px;}
.inner-nav li:firsr-child{ margin-left:0}
.honor .swiperbox{top:-55px}
.honor .swiperbox .swiper-button-prev, .honor .swiperbox .swiper-button-next{ width:35px; height:35px}
.company .txt, .company .picbox{ width:100%}
.company .pic{ text-align:center}
.company .pic:after{ display:none}
.company .numbox{ margin-top:20px}
.company .numbox .num span{ font-size:35px;}
.culture li{ width:50%}
.newscon{ padding:30px 50px}
.footer{ padding-top:30px;}
.footer-top{ padding-bottom:30px}
.f-logo, .f-ewm{ display:none}
.f-nav{ margin-left:0; width:100%}
.f-nav ul{ display:flex; display:-webkit-flex; justify-content:space-between}
.f-nav li{ margin-right:50px;}
.page_2 .more{line-height:31px;top: 20px;}
.newDetail{ min-height:auto}
.related-news, .related-pro{ margin-top:30px;}
.product-con{ padding:30px 50px; font-size:14px;}
.product-nav li{ line-height:30px; padding-bottom:5px}
.product-top .right .intro{ font-size:14px;}
.caselist .more{ height:auto; line-height:33px;width:100px;padding-left:10px;background: url(../images/arrow3.png) no-repeat right 10px center;margin-top: 25px;}
.caselist .bot li{ position:relative}
.caselist .bot .more{height:auto;line-height:28px; border:none; padding-left:0; background:none; font-size:12px;}
.caselist .txt{ padding-right:3%; padding-bottom:3%; padding-top:3%}
.caselist .bot li h3{ font-size:16px; line-height:24px; height:48px;}
.caselist .pic{ position:absolute; left:0;top:0;bottom:0}
}
@media screen and (max-width:768px){
.m-menu, .m-menubg{ width:100%}
.banner a{height:500px}
.banner .txt h3{ font-size:40px;}
.banner .txt h4{ font-size:18px;}
.banner .txt .more{ font-size:14px;line-height: 35px;padding:0 20px}
.banner .swiper-pagination-bullet{ width:8px; height:8px;}
.banner .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{ margin:0 5px}
.title, .ntitle{ font-size:26px;}
.inner-nav ul{ display:none}
.inner-nav-m{ display:block}
.i-about .left, .i-about .right{ width:100%}
.i-about-list{ width:calc(100% - 20px)}
.i-about .right{ margin-top:20px}
.i-about .title{ text-align:center}
.i-news .tapnav{ display:none}
.i-product .wrap{ padding:0 3%}
.i-product .preview{ margin-top:20px}
.i-product .view .txt{left:3%}
.i-product .view h2{ font-size:26px; margin-bottom:20px;}
.i-product .view .intro{ font-size:14px;}
.i-product .view .intro ul{ margin-top:20px}
.i-product .view .pic{ padding-left:50%}
.i-product .view .pic img{ height:350px; width:auto; display:block}

.footer{ padding-top:20px; padding-bottom:45px;}
.f-nav li{ width:100%; margin-right:0; border-bottom:1px solid #ddd}
.f-nav li:last-child{ display:block}
.f-nav ul{ display:block}
.f-nav .sub{ display:none; padding:10px}
.f-nav h3{ margin-bottom:0; line-height:40px;padding: 0 10px; position:relative; white-space:nowrap; overflow:hidden}
.f-nav h3:after{ content:""; width:8px; height:8px; border-top:2px solid #ccc; border-right:2px solid #ccc; -moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg); display:block; position:absolute;right:10px;top:15px}
.f-nav h3.active {background: #093580; color:#fff}
.f-nav h3.active:after{border-top:2px solid #fff; border-right:2px solid #fff;}
.footer-top{ padding-bottom:20px;}
.footer-bot{ margin:0; padding:10px 3%; background:#f3f3f3}
.footer-bot>div{ float:none; font-size:12px; line-height:20px; display:inline}

.company .numbox li p{ line-height:20px; margin-bottom:0}
.culture li{ width:100%}
.culture .pic{ height:400px}
.culture .txt>*{ line-height:20px}
.product-list li, .newslist li{ width:47%}
.newscon .ntit{ font-size:20px}
.newscon .ntime{ margin-top:10px;padding-bottom: 10px; margin-bottom:20px; line-height:20px}
.product-top .left{ width:100%; padding:30px 30px 20px;}
.product-top .left img{ width:auto; margin:0 auto}
.product-top .right{ width:100%; padding:0 30px 20px}


.page_2{ margin-top:30px;padding-top:20px;}
.contactBox{ background:none}
.contact-list{ width:100%; padding:0}
.contact-list h2{margin-bottom:0;margin-top:0; font-size:22px}
#allmap{ width:100%; height:300px}
.m-footer{ display:block}
.float_kf{ display:none}
}
@media screen and (max-width:640px){
.m-menu li>a{ font-size:18px; line-height:40px}
.banner a{ height:400px;}
.banner .txt h3{ font-size:30px;}
.banner .txt h4{ font-size:16px; line-height:20px}
.banner .swiper-pagination{bottom:15px}
.swiper-button-next, .swiper-button-prev{ margin-top:0; width:10%}
.banner .swiper-button-prev span, .banner .swiper-button-next span{ width:45px; height:45px;margin-top:0;}
.banner .swiper-button-next span:after{width: 10px;height:10px;margin-left:-8px;top:18px;}
.banner .swiper-button-prev span:after{width: 10px;height:10px;top:18px;}
.i-product .view .pic{ padding-left:0}
.i-product .view .pic img{ margin:0 auto; height:300px;}
.i-product .view .txt{ padding-top:0; position:relative; width:94%}
.i-product .view h2{ text-align:center; font-size:24px;}
.i-product .view .intro ul{ margin-top:5px;}
.i-product .view .intro li{ display:inline-block}
.nbanner{ height:200px;}
.i-solution-list h3, .i-newscon h3{ font-size:16px;}
.title, .inner-nav .ntitle, .ntitle{ font-size:24px;}
.inner-nav-m .tit{ height:40px; line-height:30px;}
.inner-nav-m .tit:after{top:12px}
.inner-nav-m .sub{top:40px;}
.main.space{ padding-top:20px}
.culture .pic{ height:auto}
.culture .txt{ padding:10% 3%}
.culture .txt .icon img{ height:40px}
.culture .txt h3{ margin:15px 0}
.culture .txt p{ opacity:.8}
.product-list ul, .newslist ul{ margin-right:0}
.product-list li, .newslist li{ width:100%; margin-right:0}
.newslist li .intro{ height:auto}
.content-c{ line-height:26px;}
.contact-list .item{ padding:12px 0;padding-left:50px;}
.contact-list .person{background-size:25px;}
.contact-list .tel, .contact-list .add{background-size:30px;}
.contact-list h2{ font-size:18px;}
#allmap{ height:200px}
.newslist .txt{ padding:20px}
.newslist .txt h3, .product-list .txt h3{ white-space:normal}
.newscon{ padding:20px 4% 30px}
.page_2 .more{ position:relative;top:auto;right:auto; margin:10px auto 0; display:block;line-height: 28px;}
.product-list .txt{ padding:0 20px 20px}
.product-list .txt h3, .related-pro .txt h3{ font-size:18px;}
.product-list .txt .intro{margin-top:10px;}
.related-pro .txt, .related-news .txt{ padding:20px}
.related-pro .txt .intro, .related-news .txt .intro{ margin-top:10px}
.product-con{ padding:20px 4%}
.product-nav li{ font-size:18px;}
.product-top .left{ padding:4%}
.product-top .right{ padding-left:4%; padding-right:4%}
.product-top .right h2{ font-size:24px; line-height:30px; margin-bottom:10px}
.caselist .pic{ position:relative; width:100%}
.caselist .txt{ width:100%; padding:20px}
.caselist h3{ font-size:18px; margin-bottom:10px}
.caselist .more{ margin-top:10px}
.caselist .intro{ line-height:22px; height:auto;}
.caselist .bot{ margin-top:30px; margin-right:0}
.caselist .bot li{ width:100%; margin-right:0}
.caselist .bot .pic{ width:40%; position:absolute}
.caselist .bot .txt{ width:55%; padding-left:0}
}
@media screen and (max-width:425px){
.banner .txt h3{ font-size:24px; font-weight:bolder; margin-bottom:5px}
.banner .txt h4{ font-size:14px;}
.banner .txt .more{ font-size:12px; line-height:30px;}
.i-product .view .pic img{ height:260px}
.i-product .view .more{ line-height:28px; margin-top:10px; margin-bottom:10px;}
.i-product .preview .line{ margin-top:10px}
.i-product .preview h3{ font-size:12px;}

.nbanner{ height:150px}
.newscon .ntit{ font-size:18px; line-height:24px;}
}